<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>角色管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="70" :model="formInfo" inline>
      <FormItem label="角色名称" prop="roleName">
        <i-input v-model="formInfo.roleName" placeholder="请输入" style="width:220px"></i-input>
      </FormItem>
      <Button type="primary" @click="selectRole()">查询</Button>
    </Form>
    <!-- 添加、删除 -->
    <div class="butt">
      <Button type="primary" icon="md-add" @click="propertyAdd">添加</Button>
      <Button type="error"  class="delete">批量删除</Button>
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>

    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fenye1">
    </Page>

    <!--修改角色信息弹窗-->
    <Modal v-model="formTable.modal" title="角色信息修改" @on-cancel="modalCancel" >
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="90"
        :model="formTable"
      >
        <Form-item label="角色姓名" prop="roleName">
          <i-input v-model="formTable.roleName" placeholder="请输入名称"></i-input>
        </Form-item>
        <Form-item label="角色描述" prop="roleDesc">
          <i-input v-model="formTable.roleDesc" placeholder="请输入"></i-input>
        </Form-item>
        <Form-item label="状态" prop="ifVilid">
          <i-input v-model="formTable.ifVilid" placeholder="请输入..."></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    const validatePassCheck = (rule, value, callback) => {}
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInfo: {
        roleName: ''
        
      },
      formTable: {
        modal: false,
        loading: false,
        roleId: 0,
        roleName: '',
        roleDesc: '',
        ifVilid: ''
      },

      columns7: [
        {
          type: 'selection',
          width: 80,
          align: 'center'
        },
        {
          title: '角色id',
          key: 'roleId',
          align: 'center',
          width: 180,
        //  render: (h, params) => {
        //     return h('div', [
        //       h('Icon', {
        //         props: {
        //           type: 'role'
        //         }
        //       }),
        //       h('strong', params.row.roleId)
        //     ])
        //   }
        },
        {
          title: '角色名称',
          key: 'roleName',
          align: 'center',
          width: 200
        },
        {
          title: '角色描述',
          key: 'roleDesc',
          align: 'center'
        },
        {
          title: '是否有效',
          key: 'ifVilid',
          width: 120,
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.roleEdit(params.row)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index,params.row)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data6: [
        {
          roleId: '',
          roleName: '',
          roleDesc: '',
          ifVilid: ''          
        }
      ]

      }
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getRoleManage();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getRoleManage();
    },
    getRoleManage(){
      this.$axios.get("role",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data6 = response.data.data;
        })
        .catch();
    },
    //查询
    selectRole () {
      this.$axios.get('roles', {
        params: {
          name: this.formInfo.roleName
        }
        }).then(response => {
          console.log(response.data)
          this.data6 = response.data.data;
        }).catch()
    
      this.$refs[roleName].validate(valid => {
      })
    },
//用户添加
    propertyAdd () {
     this.$router.push('Addrole')
    },
//删除
    remove(index,row) {
      this.$Modal.confirm({
          title: '温馨提示',
          width: 300,
          content: '<p>你确定要删除?删除后不可恢复!</p>',
          loading: false,
          onOk: () => {
            this.data6.splice(index, row.roleId)
             this.$axios.delete("role",{params:{roleId:row.roleId
          }
          
        })
        
          }
        });
    },
    
// 修改
    editSubmit:function(data){
      this.formTable.loading = true
      this.$axios.put('role',{
        roleId:this.formTable.roleId,
        roleName:this.formTable.roleName,
        roleDesc:this.formTable.roleDesc,
        ifVilid:this.formTable.ifVilid
      })
      .then(response=>{
        
       this.formTable.loading = false
        this.modalCancel()
        if (response.data.code == 0) {
          this.$Notice.success({
            title: '信息修改成功'
          })
        } else {
          this.$Notice.error({
            title: '信息修改失败'
          })
        }
      }).catch(
        console.log(response.data)
      )
    },
//获取每一行值
    roleEdit (row) {
      console.log(row)
        this.formTable.modal = true

        this.formTable.roleId = row.roleId,
        this.formTable.roleName = row.roleName,
        this.formTable.roleDesc = row.roleDesc,
        this.formTable.ifVilid = row.ifVilid  
    },
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
  //查询所有
  created: function() {
    this.getRoleManage()
  //  this.$axios.get("roles")
  //     .then(response => {
  //       console.log(response.data);
  //       this.data6 = response.data.data;
  //     })
  //     .catch();
  }
}
</script>

<style >
.fenye1 {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.delete{
  position: relative;
  left: 30px;
}

.butt{
  position: relative;
  top: 1px;
  left: 1px;
}


</style>